<template>
  <van-nav-bar
      fixed
      title="消息"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
  />
  <van-divider></van-divider>
  <van-divider></van-divider>
  <div v-for="item in messages" :key="item.id">
    <van-tag>{{item.status==1?"已读":"未读"}}</van-tag>
    <van-swipe-cell>
      <van-cell icon="https://img.yzcdn.cn/vant/cat.jpeg" :border="true" :value="item.content" />
      <template #right v-if="item.status==0">
        <van-button square type="danger" text="标为已读" @click="signRead(item.id)"/>
      </template>
    </van-swipe-cell>
  </div>
</template>

<script>
import {getMessage,read} from "@/api/message";
import {Toast} from "vant";

export default {
  name: "Message",
  data(){
    return{
      messages:{}
    }
  },
  created() {
    getMessage().then((res)=>{
      console.log(res)
      if(res.code==401){
        Toast.fail("请先登录")
      }
      this.messages = res.data
      // console.log(this.messages)
    })
  },
  methods: {
    onClickLeft() {
      history.back()
    },
    signRead(id){
      read(id).then(()=>{
        this.$router.go(0)
      })
    }
  }
}
</script>

<style scoped>

</style>
